<template>
  <div class="data-board">
    <div class="data-board-item" v-for="(item, i) in list" :key="i">
      <div class="data-board-item-header" :style="{
        width: item.width + 'px',
        height: item.header && item.header.height ? item.header.height + 'px' : '32px',
        lineHeight: item.header && item.header.height ? item.header.height + 'px' : '32px',
        color:
          item.header && item.header.color ? item.header.color : 'var(--el-text-color-primary)',
        backgroundColor:
          item.header && item.header.backgroundColor
            ? item.header.backgroundColor
            : 'var(--el-bg-color)',
        '--data-board-item-header-bg': item.header.lineColor,
        ...headerStyle
      }">
        <slot name="header" :data="item">
          <div class="data-board-item-header-title">
            {{ item.header.title }}
          </div>
        </slot>
      </div>
      <div class="data-board-item-body" :style="{
        width: item.width + 'px',
        height: `calc(100% - ${item.header && item.header.height ? item.header.height + 'px' : '32px'
          } - 2px)`,
        ...bodyStyle
      }">
        <el-empty v-if="item.items.length === 0"></el-empty>
        <div class="data-board-item-body-card" v-ripple :style="cardStyle" v-for="(card, j) in item.items" :key="j"
          @click="cardClick(item, card, j)">
          <slot name="card" :data="card">
            <pre class="data-board-item-body-card-content">
              {{ card.content }}
            </pre>
            <div class="data-board-item-body-card-date" v-if="card.date">
              {{ card.date }}
            </div>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ripple } from '../../directives';
import { DataBoardProps } from '../../props'
import type { DataBoardInfo, DataBoardInfoItem } from '../../types'

const vRipple = ripple

defineProps(DataBoardProps)

const emit = defineEmits(['cardClick'])

const cardClick = (item: DataBoardInfo, card: DataBoardInfoItem, j: number) => {
  emit('cardClick', item, card, j)
}
</script>

<style scoped lang="scss">
@import './DataBoard.scss';
</style>
